<template>
  <div class="goods-setting views-container">
    <div class="wlm-form">
      <div class="wlm-form-header">基础设置</div>
      <div class="wlm-form-content">
        <el-form
          ref="platform"
          :model="formFormatData.formData"
          :rules="formFormatData.rules"
          size="small"
          label-width="170px"
          class="retail-form"
          label-position="right"
        >
          <el-form-item label="商品使用长方形样式" prop="is_goods_long">
            <el-checkbox-group v-model="formFormatData.formData.is_goods_long">
              <el-checkbox label="1">推荐商品列表</el-checkbox>
              <el-checkbox label="2">查找页商品列表</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
           <el-form-item label="商品分类样式" prop="is_goods_long">
               <el-radio-group v-model="formFormatData.formData.goods_page_diy">
                  <el-radio label="1">传统列表</el-radio>
                  <el-radio label="2">快速购买</el-radio>
                </el-radio-group>
           </el-form-item>
          <el-form-item label="商品页筛选条件" prop="product" v-if="formFormatData.formData.goods_page_diy==1">
            <el-radio-group v-model="formFormatData.formData.product">
              <el-radio label="1">开启</el-radio>
              <el-radio label="2">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否自定义服务图标" prop="fw_icon_off">
            <el-radio-group v-model="formFormatData.formData.fw_icon_off">
              <el-radio label="1">是</el-radio>
              <el-radio label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="服务图标">
            <choose-files
              ref="chooseFiles"
              :config="fwiconConfig"
              :changeEvt="formFormatFiltersChange"
            ></choose-files>
            <p class="form-help">注：建议尺寸36x36px</p>
          </el-form-item>
          <el-form-item
            label="广告位图片"
          >
            <choose-files
              ref="chooseFiles"
              :config="choosefenweiConfig"
              :changeEvt="formFormatFiltersChange"
            ></choose-files>
            <div class="form-help">建议尺寸690*150</div>
          </el-form-item>
          <el-form-item
            label="广告位链接"
          >
            <choose-link
              ref="chooseIconLink"
              :config="chooseLinkConfig"
              :changeEvt="uploadIconFileChange"
            ></choose-link>
            <el-input
              v-model="formFormatData.formData.adsense_link"
              @focus="uploadFileToggle"
              placeholder="请选择链接"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="wlm-form">
      <div class="wlm-form-header">商品详情自定义</div>
      <div class="wlm-form-content">
        <el-form
          ref="platform"
          :model="formFormatData.formData.text_diy"
          :rules="formFormatData.rules"
          size="small"
          label-width="170px"
          class="retail-form"
          label-position="right"
        >
          <el-form-item label="搭配更优惠" prop="collocation">
            <el-input
              v-model="formFormatData.formData.text_diy.collocation"
              maxlength="15"
              show-word-limit
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="商家信息" prop="bus_info">
            <el-input
              v-model="formFormatData.formData.text_diy.bus_info"
              maxlength="15"
              show-word-limit
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="购买须知" prop="buy_notice">
            <el-input
              v-model="formFormatData.formData.text_diy.buy_notice"
              maxlength="15"
              show-word-limit
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="商品评价" prop="evaluate">
            <el-input
              v-model="formFormatData.formData.text_diy.evaluate"
              maxlength="15"
              show-word-limit
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="邀请好友一起抢" prop="friend">
            <el-input
              v-model="formFormatData.formData.text_diy.friend"
              maxlength="15"
              show-word-limit
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="商品详情" prop="goods_detail">
            <el-input
              v-model="formFormatData.formData.text_diy.goods_detail"
              maxlength="15"
              show-word-limit
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="wlm-form">
      <div class="wlm-form-header">商品不支持退款协议</div>
      <div class="wlm-form-content">
        <el-form
          ref="platform"
          :model="formFormatData.formData"
          :rules="formFormatData.rules"
          size="small"
          label-width="170px"
          class="retail-form"
          label-position="right"
        >
          <el-form-item label="标题" prop="collocation">
            <el-input
              v-model="formFormatData.formData.after_title"
              maxlength="15"
              show-word-limit
              placeholder="请输入标题"
            ></el-input>
          </el-form-item>
          <el-form-item label="协议">
            <ueditor
              v-if="isDelay"
              :ueditorChange="serverInfoChange"
              :ueditorList="ueditorList"
              :bindIndex="1"
              :defaultMsg="defaultMsg2"
              :config="{ initialFrameWidth: null, initialFrameHeight: 350 }"
              ref="by_know"
            ></ueditor>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="wlm-form">
      <div class="wlm-form-header">预约商品设置</div>
      <div class="wlm-form-content">
        <el-form
          ref="platform"
          :model="formFormatData.formData"
          :rules="formFormatData.rules"
          size="small"
          label-width="170px"
          class="retail-form"
          label-position="right"
        >
          <el-form-item label="预约库存文字自定义" prop="collocation">
            <el-input
              v-model="formFormatData.formData.rservation_text"
              maxlength="2"
              show-word-limit
              placeholder="库存"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
      <el-button size="small" @click="saveForm" type="primary">保存</el-button>
    </div>
  </div>
</template>

<script>
import { goodsSettingGet, goodsSettingSave } from "@/api/merchandise";
import ueditor from "@/components/Ueditor/index";
import ChooseFiles from "@/components/ChooseFiles/index";
import ChooseLink from '@/components/ChooseLink/index'

import ChooseGoods from "@/components/ChooseGoods/index";
import mixins from "@/mixins/mixins";
export default {
  mixins: [mixins.getters("Form")],
  name: "GoodsSetting",
  components: {
    ChooseFiles,
    ChooseGoods,
    ueditor,
    ChooseLink
  },
  directives: {},
  data() {
    return {
      isDelay: false,
      ueditorList: [],
      defaultMsg2: "",
      chooseGoodsConfig: {
        type: ["chooseGoods"],
        model: "normal",
        initList: []
      },
      fwiconConfig: {
        type: ["image"],
        model: "display",
        uploadConfig: {
          limit: 1,
          model: "display"
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: "image",
        bindKey: {
          key: "fw_icon",
          model: "img"
        }
      },
      chooseLinkConfig: {
        type: ['chooseLink'],
        initList: [],
        link_type: '1'
      },
      choosefenweiConfig:{
         type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'adsense_image',
          model: 'img'
        }
      },
      formFormatData: {
        key: ["platform"],
        api: {
          editForm: {
            api: goodsSettingGet,
            params: {
              always: true
            },
            filters: {
              choose: {
                bindInit: ["chooseGoodsConfig","choosefenweiConfig"]
              },
              img: {
                bindInit: ["fwiconConfig"]
              }
            }
          },
          submitForm: goodsSettingSave
        },
        formData: {
          adsense_image:[],
          adsense_link:'',
          // recommendGoods: [],
          is_recommendGoods: "1",
          fw_icon: [],
          is_goods_long: [],
          product: "2",
          fw_icon_off: "2",
          goods_page_diy:'1',
          text_diy: {
            collocation: "",
            bus_indo: "",
            buy_notice: "",
            evaluate: "",
            friend: "",
            goods_detail: ""
          },
          after_agreement: "",
          after_title: "",
          rservation_text: ""
        },
        rules: {
          withdrawal_rate: [
            {
              required: true,
              message: "请输入结算频率",
              trigger: "blur"
            }
          ]
        }
      }
    };
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.isDelay = true;
      }, 500);
    });
  },
  methods: {
    uploadFileToggle(){
      this.$refs.chooseIconLink.toggle()
   },
   //链接回调
   uploadIconFileChange(files) {
     const { key } = files
      if(key==='ChooseLink'){
          const { currentRow: [file_path],displayData: [{  path}] } = files
         if (file_path || path) {
         this.formFormatData.formData.adsense_link = file_path || path
      }else{
        this.$message.error('请选择链接~!')
      }
      }
    },
    serverInfoChange(msg) {
      this.defaultMsg2 = msg;
    },
    saveForm() {
      this.$nextTick(() => {
        this.formFormatData.formData.after_agreement = this.defaultMsg2;
        this.formFormatSubmit();
      });
    },
    formFormatCallBack(data, type, response) {
      if (type === "editForm") {
        const { after_agreement } = data;
        this.defaultMsg2 = after_agreement;
      }
    },
    filtersChange(val) {
      this.currentRow = val.currentRow;
      const displayData = val.displayData;
      displayData.map(item => {
        var hasIndex = this.formFormatData.formData.recommendGoods.findIndex(
          tableItem => {
            return tableItem.goods_id === item.goods_id;
          }
        );
        if (
          hasIndex === -1 &&
          this.formFormatData.formData.recommendGoods.length < 8
        ) {
          this.formFormatData.formData.recommendGoods.push({
            image: item.image[0]["file_path"],
            goods_name: item.goods_name,
            goods_id: item.goods_id,
            goods_price: item.goods_min_price
          });
        }
        console.log(this.formFormatData.formData.recommendGoods);
      });
    },
    goodsToogle() {
      const result = [];
      this.formFormatData.formData.recommendGoods.map(item => {
        result.push(item.goods_id);
      });
      this.$refs.chooseGoods.currentRow = result;
      this.$refs.chooseGoods.toggle();
    },
    deleteGoodsTable(scope) {
      this.formFormatData.formData.recommendGoods.splice(scope.$index, 1);
      this.currentRow.splice(scope.$index, 1);
    }
  }
};
</script>

<style lang="scss" scoped>
.recommendGoods-setting {
}
</style>
